<template>
  <div class="home">

    <div class="view flex-row align-center justify-between top-tra" style="border: 1px solid rgb(215, 193, 154);
    border-radius: 10px;
    position: fixed;
    top: 25px;
    width: calc(100% - 110px);
    left: 28px;
    height: 50px;
    padding-left: 30px;
    background: rgb(25, 24, 31);
    padding-right: 15px;;z-index:10;"  :style="showPDialog ? 'opacity: 1;top:20px':'opacity: 0;top:-99px'">
        <div class="view flex-row align-center">
            <van-icon name="smile-comment" color="#D7C19A" size="24"/>
            <div style="margin-left:15px;">
                <div style="font-size:14px;color: #fff;margin-bottom:3px;">已提交交易</div>
                <div style="font-size:12px;color: #ccc;">请耐心等待..</div>
            </div>
        </div>
        
        <van-icon name="cross" size="14" color="#fff" @click="closeLo"/>
    </div>

    <div>
        <div class="p-l-30 p-r-30 view flex-row align-center justify-between" style="margin-bottom:30px;">
            <div @click="changeTab(0)">
                <img :src="require('@/assets/imgs/b1.png')" style="width:180px;height:130px;" v-if="active == 0"/>
                <img :src="require('@/assets/imgs/b2.png')" style="width:150px;height:127px;" v-if="active == 1"/>
            </div>
            <div @click="changeTab(1)">
                <img :src="require('@/assets/imgs/a1.png')" style="width:150px;height:127px;" v-if="active == 0"/>
                <img :src="require('@/assets/imgs/a2.png')" style="width:180px;height:130px;" v-if="active == 1"/>
            </div>
        </div>

        <van-swipe  ref="swBody" :loop="false"  :touchable="false" indicator-color="transparent">
            <van-swipe-item>
                <mescroll-vue class="mescroll1" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
                        <div class="p-l-30 p-r-30" style="padding-bottom:50px;">
                            <div style="border: 1px solid #696969; border-radius: 30px;" class=" p-t-20  m-b-36">
                                <div class="view flex-row justify-between  b-r-radius-20 p-l-20 p-r-20 p-b-20" >
                                    <div>
                                        <div style="margin-bottom:25px;" class="c-fff fz-18">Mobius NFT总量</div>
                                        <div class="fz-14 c-fff">{{ interTotal.totalNftNumber || '--,--'  }}</div>
                                    </div>
                                    
                                    <div >
                                        <img :src="require('@/assets/imgs/cccd.png')" style="width:99px;height:80px;"/>
                                    </div>
                                </div>

                                <div style="border-top:1px solid #5F5E5F;" class="view flex-row align-center justify-between p-l-10 p-r-10">
                                    <div  style="color:#D7C19A;font-size:14px;height:40px;" class="view align-center flex-row p-l-20" >
                                        铸造力总量:
                                        <countTo :startVal='0' :endVal='totalData.hashrate || 0' :duration='3000'></countTo>
                                    </div>

                                    <div style="color:#D7C19A;font-size:14px;height:40px;" class="view align-center flex-row p-l-20" @click="intvite">
                                        邀请好友   
                                        <van-icon name="share" style="margin-left:5px;"/>
                                    </div>

                                </div>
                                
                            </div>
                            <div style="border: 1px solid #696969; border-radius: 30px;margin-bottom:30px;" class="p-l-20 p-r-20 p-t-20 p-b-20">
                                <div class="view flex-row align-center justify-between m-b-30">
                                    <div>
                                        <div class="c-663 m-b-30 fz-12">我的铸造力</div>
                                        <div class="c-d7c fz-14">
                                            <countTo v-if="totalData.my_hashrate" :startVal='0' :endVal='totalData.my_hashrate' :duration='3000'></countTo>
                                            <span v-else>--,--</span>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <div class="c-663 m-b-30 fz-12">已领取收益</div>
                                        <div class="c-d7c fz-14"><countTo  :startVal='0' :endVal='totalData.nft_already_received_earn' :duration='3000'></countTo> STC</div>
                                    </div>
                                </div>

                                <div style="height:52px;background-color: #696969;border-radius: 40px;position: relative;">
                                    <div class="bg-242 width100"></div>
                                    <van-button type="primary" class="fz-14 c-fff" round color="linear-gradient(180deg, #FE9C52 0%, #FE7A3F 100%)" style="position: absolute;right:4px;top:4px;width:120px;" @click="getSY">领取收益</van-button>
                                </div>

                                <div style="color: #FE974F;font-size:13px;margin-top:16px;text-align: center;" @click="getSLData"> >>> 我的铸造力明细 <<< </div>
                            </div>

                            <div style="border: 1px solid #696969; border-radius: 30px;height:150px;" class="p-l-20 p-r-20 p-t-20 p-b-20 s-bg-imgs view m-b-30 justify-between" >
                                <div class="fz-18 c-fff bold">我的铸造力NFT</div>
                                <div class="view flex-row align-end justify-between">
                                    <div class="view">
                                        <div class="c-fff fz-14 m-b-5">x <span class="c-fff fz-20">{{ totalData.nft_num || 0}}</span></div>
                                        <div class="fz-12 c-070">数量</div>
                                    </div>

                                    <div>
                                        <van-button style="background: transparent;" plain type="primary"  color="#D7C19A" round class="m-r-20" :loading="pleLoading" @click="pledgeOne">质押单个</van-button>
                                        <van-button type="primary" color="linear-gradient(180deg, #FE9C52 0%, #FE7A3F 100%)" round style="width:100px;"  :loading="pleLoading1" @click="pledgeAll">质押全部</van-button>
                                    </div>
                                </div>
                            </div>

                            <div style="border: 1px solid #696969; border-radius: 30px;" class=" justify-center  view  justify-between">
                                <div class="p-l-20 p-t-20 p-b-20 p-r-30 view justify-center" style="height:50%;border-bottom:1px solid #5F5E5F;">
                                    <div class="c-fff bold" style="font-size:18px;margin-bottom:16px;">LP池</div>
                                    <div class="view flex-row align-center justify-between">
                                        <div>
                                            <div class="c-d7" style="font-size:12px;margin-bottom:10px;">当前总质押</div>
                                            <div class="c-fff" style="font-size:16px;">
                                                
                                                <countTo  :startVal='0' :endVal='totalData.total_pledge_lp' :duration='3000'></countTo>
                                            </div>
                                        </div>
                                        <van-button type="primary"  color="#D7C19A" round style="width:100px;" @click="ZYLP">质押</van-button>
                                    </div>
                                </div>
                            
                                <div>
                                    <div class="view flex-row  p-r-30 justify-between p-l-20 p-t-20 p-b-20">
                                        <div class="view" style="width:50%;margin-right:30px;">
                                            <div class="m-b-15 c-666 m-b-20">我的质押</div>
                                            <div class="c-d7 fz-13">{{  totalData.my_pledge_lp  > 0 ? totalData.my_pledge_lp:'--,--'}}</div>

                                            <van-button style="background-color:transparent;" class="m-t-20 width100" plain color="#D7C19A" round @click="SHLP" >赎回</van-button>
                                        </div>
                                        
                                        <div class="view" style="width:50%;">
                                            <div class="m-b-15 c-666 m-b-20">待领取收益</div>
                                            <div class="c-d7 fz-13"><countTo  :startVal='0' :endVal='totalData.nft_wait_received_earn' :duration='3000'></countTo> STC </div>

                                            <van-button class="m-t-20 width100"  color="#D7C19A" round  style="background-color:transparent;" @click="getSYLP">领取收益</van-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </mescroll-vue>
            </van-swipe-item>

            <van-swipe-item>
                    <CardList @showImgs="prevImg" ref="clist" @showAmake="showAmake"/>
            </van-swipe-item>
            
        </van-swipe>
        <Tabbar/>
    </div>
    
    <van-dialog :close-on-click-overlay="false" class="common-dialog" v-model="showDialogHL" :show-confirm-button="false" :show-cancel-button="false">
            <div slot="title" class="bg-312 p-b-20 view flex-row align-center justify-between p-l-20 p-r-20">
                <div class="fz-14 c-fff">邀请好友</div>
                <van-icon name="cross" size="24" color="#fff" @click="closeHL"/>
            </div>

            <div class="bg-312   p-l-20 p-r-20 p-b-20">
                <div class="view align-center flex-row justify-between m-b-20">
                    <div>
                        <div class="m-b-20 c-fff text-center">我邀请了</div>
                        <div class="fz-14 c-fff text-center" >{{ inviteInfo && inviteInfo.invite_num }}</div>
                    </div>

                    <div>
                        <div class="m-b-20 c-fff text-center">我的邀请码</div>
                        <div class="view flex-row align-center">
                            <div class="fz-14 c-fff text-center m-r-5">{{inviteInfo && inviteInfo.invite_code }}</div>
                            <span @click="copy" style="color:#e03997;font-weight:bold;" >复制</span>
                        </div>
                        
                    </div>
                </div>

                <div class="view flex-row align-center">
                    <van-field :border="false" v-model="insertInviteCode"  placeholder="请输入邀请码" />
                    <van-button :disabled="bindParentBtn" type="primary" style="width:80px;" color="linear-gradient(rgb(254, 156, 82) 0%, rgb(254, 122, 63) 100%)" @click="bindVal">绑定</van-button>
                </div>

                <div class="view flex-row align-center justify-center" style="margin-top:30px;">
                    <van-button style="width:130px;background-color: transparent;margin-right:15px;" type="primary" @click="closeHL"  plain color="#D7C19A" >关闭</van-button>
                </div>
            </div>
    </van-dialog>

    <van-dialog :close-on-click-overlay="false" class="common-dialog" v-model="showDialogSL" :show-confirm-button="false" :show-cancel-button="false">
            <div slot="title" class="bg-312 p-b-20 view flex-row align-center justify-between p-l-20 p-r-20">
                <div class="fz-14 c-fff">我的铸造力</div>
                <van-icon name="cross" size="24" color="#fff" @click="closeSL"/>
            </div>
            <div class="bg-312   p-l-20 p-r-20 p-b-20">
                <div class="view align-center flex-row">
                    <div class="flex-1 view align-center justify-center" style="border-right: 1px solid #707070;">
                        <div class="fz-14 c-d7c m-b-20">个人铸造力</div>
                        <div class="fz-18 c-fff">{{ slData.static }}</div>
                    </div>
                    
                    <div class="flex-1 view align-center justify-center">
                        <div class="fz-14 c-d7c m-b-20">体系铸造力</div>
                        <div class="fz-18 c-fff">{{ slData.dynamic }}</div>
                    </div>
                </div>
                <div class="view flex-row align-center justify-center" style="margin-top:30px;">
                    <van-button style="width:130px;background-color: transparent;margin-right:15px;" type="primary" @click="showDialogSL = false"  plain color="#D7C19A" >取消</van-button>
                    <van-button style="width:130px;" type="primary" color="#D7C19A" @click="showDialogSL = false" >确认</van-button>
                </div>
            </div>
    </van-dialog>

    <van-dialog :close-on-click-overlay="false" class="common-dialog" v-model="showDialog" :show-confirm-button="false" :show-cancel-button="false">
            <div slot="title" class="bg-312 p-b-20 view flex-row align-center justify-between p-l-20 p-r-20">
                <div class="fz-14 c-fff">领取NFT收益</div>
                <van-icon name="cross" size="24" color="#fff" @click="closeShouYi"/>
            </div>
            <div class="bg-312 view align-center justify-center p-l-20 p-r-20 p-b-20">
                <div class="fz-16 c-fff m-b-20">{{ totalData.nft_wait_received_earn || 0 }}</div>
                <div class="fz-14 c-d7c m-b-20">待领取金额</div>
                <van-field
                    style="border-radius: 5px;"
                    :border="false"
                    disabled
                    type="textarea"
                    placeholder="提示：如果金额不足100不可领取，领取预 计要支付gas费用。"
                />
                <div class="view flex-row align-center justify-center" style="margin-top:30px;">
                    <van-button style="width:130px;background-color: transparent;margin-right:15px;" type="primary" @click="closeShouYi"  plain color="#D7C19A" >取消</van-button>
                    <van-button style="width:130px;" type="primary" color="#D7C19A" @click="lingquSY" :loading="shouyiLoading">确认</van-button>
                </div>
            </div>
    </van-dialog>


    <van-dialog :close-on-click-overlay="false" class="common-dialog" v-model="showDialogLPLQ" :show-confirm-button="false" :show-cancel-button="false">
            <div slot="title" class="bg-312 p-b-20 view flex-row align-center justify-between p-l-20 p-r-20">
                <div class="fz-14 c-fff">领取LP收益</div>
                <van-icon name="cross" size="24" color="#fff" @click="closeShouYiLP"/>
            </div>
            <div class="bg-312 view align-center justify-center p-l-20 p-r-20 p-b-20">
                <div class="fz-16 c-fff m-b-20">{{ totalData.lp_wait_received_earn || 0 }}</div>
                <div class="fz-14 c-d7c m-b-20">待领取金额</div>
                <van-field
                    style="border-radius: 5px;"
                    :border="false"
                    disabled
                    type="textarea"
                    placeholder="提示：如果金额不足100不可领取，领取预 计要支付gas费用。"
                />
                <div class="view flex-row align-center justify-center" style="margin-top:30px;">
                    <van-button style="width:130px;background-color: transparent;margin-right:15px;" type="primary" @click="closeShouYiLP"  plain color="#D7C19A" >取消</van-button>
                    <van-button style="width:130px;" type="primary" color="#D7C19A" @click="onReceiveIncome" :loading="shouyiLPLoading">确认</van-button>
                </div>
            </div>
    </van-dialog>


    <van-dialog :close-on-click-overlay="false" class="common-dialog" v-model="showDialogLP" :show-confirm-button="false" :show-cancel-button="false">
            <div slot="title" class="bg-312 p-b-20 view flex-row align-center justify-between p-l-20 p-r-20">
                <div class="fz-14 c-fff">质押LP</div>
                <van-icon name="cross" size="24" color="#fff" @click="closeZYLP"/>
            </div>
            <div class="bg-312 view  p-l-20 p-r-20 p-b-20">
                
                <div class="fz-16 c-fff m-b-20 view flex-row align-center justify-between">
                    <div class="fz-14 c-d7c">当前LP数量：</div>
                    <div class="c-d7c c-fff">{{ totalData.lp_num || 0 }}</div>
                </div>
                <div class="fz-14 c-d7c m-b-20 view flex-row align-center justify-between">
                    <div class="fz-14 c-d7c">质押数量：</div>
                    <div class="c-d7c c-fff">{{ zyNum }}</div>
                </div>

                <div class="view flex-row align-center m-b-20">
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPZYIndex != 0" round class="m-r-10" size="large" style="background-color: transparent;" @click="checkLPItem(0)">25%</van-tag>
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPZYIndex != 1" round class="m-r-10" size="large" style="background-color: transparent;" @click="checkLPItem(1)">50%</van-tag>
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPZYIndex != 2" round class="m-r-10" size="large" style="background-color: transparent;" @click="checkLPItem(2)">75%</van-tag>
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPZYIndex != 3" round size="large" style="background-color: transparent;" @click="checkLPItem(3)">100%</van-tag>
                </div>

                <van-field
                    style="border-radius: 5px;"
                    disabled
                    :border="false"
                    type="textarea"
                    :placeholder="`赎回质押需支付gas费用：0 `"
                />

                <div class="view flex-row align-center justify-center" style="margin-top:30px;">
                    <van-button style="width:130px;background-color: transparent;margin-right:15px;" type="primary" @click="closeZYLP"  plain color="#D7C19A" >取消</van-button>
                    <van-button style="width:130px;" type="primary" color="#D7C19A" @click="onpledgeLp" :loading="LPLoading">确认质押</van-button>
                </div>
            </div>
    </van-dialog>

    <van-dialog :close-on-click-overlay="false" class="common-dialog" v-model="showDialogSH" :show-confirm-button="false" :show-cancel-button="false">
            <div slot="title" class="bg-312 p-b-20 view flex-row align-center justify-between p-l-20 p-r-20">
                <div class="fz-14 c-fff">赎回LP池</div>
                <van-icon name="cross" size="24" color="#fff" @click="closeZYSH"/>
            </div>
            <div class="bg-312 view  p-l-20 p-r-20 p-b-20">
                
                <div class="fz-16 c-fff m-b-20 view flex-row align-center justify-between">
                    <div class="fz-14 c-d7c">当前质押数量：</div>
                    <div class="c-d7c c-fff">{{ totalData.my_pledge_lp || 0 }}</div>
                </div>
                <div class="fz-14 c-d7c m-b-20 view flex-row align-center justify-between">
                    <div class="fz-14 c-d7c">赎回数量：</div>
                    <div class="c-d7c c-fff">{{ shNum }}</div>
                </div>

                <div class="view flex-row align-center m-b-20">
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPSHIndex != 0" round class="m-r-10" size="large" style="background-color: transparent;" @click="checkSHItem(0)">25%</van-tag>
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPSHIndex != 1" round class="m-r-10" size="large" style="background-color: transparent;" @click="checkSHItem(1)">50%</van-tag>
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPSHIndex != 2" round class="m-r-10" size="large" style="background-color: transparent;" @click="checkSHItem(2)">75%</van-tag>
                    <van-tag color="#B3A095" type="primary"  :plain="chooseLPSHIndex != 3" round size="large" style="background-color: transparent;" @click="checkSHItem(3)">100%</van-tag>
                </div>

                <van-field
                    style="border-radius: 5px;"
                    disabled
                    :border="false"
                    type="textarea"
                    :placeholder="`赎回质押需支付gas费用：0 `"
                />

                <div class="view flex-row align-center justify-center" style="margin-top:30px;">
                    <van-button style="width:130px;background-color: transparent;margin-right:15px;" type="primary" @click="closeZYSH"  plain color="#D7C19A" >取消</van-button>
                    <van-button style="width:130px;" type="primary" color="#D7C19A" @click="onRedeem" :loading="SHLoading">确认赎回</van-button>
                </div>
            </div>
    </van-dialog>

    <authAmake ref="aMake" />
    <van-image-preview v-model="showPrev" :images="images"  />
  </div>
</template>

<script>

import Tabbar from '@/components/Tabbar.vue'
import CardList from '@/components/card-list.vue'
import {  getTotalHashRateData, getMyNftHashRateData, getPoolData, pledgeNftOne, receiveNft, ZYpledgeLp, onRedemptionLp, onReceiveLpEarnData, toGetInvite, toBindInviteCode, getTransferLogData } from '@/api/index'
import countTo from 'vue-count-to';

import MescrollVue from 'mescroll.js/mescroll.vue'
import authAmake from '@/components/authAmake';
export default {
  name:"home",
  data(){
    return {
      value: "",
      active: 0,
      shouyi: '',
      showPrev: false,
      pleLoading:false,
      pleLoading1: false,
      images: [],
      interTotal: {},
      slData: {},
      totalData: {},
      bindParentBtn: false,
      insertInviteCode: '',
      chooseLPZYIndex: 0, // 25%
      chooseLPSHIndex: 0, // 25%
      showDialogSL: false,
      shouyiLoading: false,
      LPLoading: false, // LP质押
      showDialog: false,
      showDialogLP: false,
      showDialogLPLQ: false,
      shouyiLPLoading: false,
      pleAllLoading: false,
      showDialogSH: false,
      showDialogHL: false,
      SHLoading: false,
      showPDialog: false,
      timer: null,
      inviteInfo: {},
      list: [],
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.upCallback,
        auto: false
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: { // 上拉加载的配置.
            
      }
    };
  },
  mounted() {
    this.fetchData()
    this.doTimer()
    this.getInviteInfo()
  },
  beforeDestroy() {
    if (this.timer) {
        clearInterval(this.timer)
    }
  },
  computed: {
    // 赎回数量
    shNum() {
        if (this.chooseLPSHIndex == 0) {
            return this.totalData.my_pledge_lp * .25 || 0
        } else if (this.chooseLPSHIndex == 1) {
            return this.totalData.my_pledge_lp * .5 || 0
        } else if (this.chooseLPSHIndex == 2) {
            return this.totalData.my_pledge_lp * .75 || 0
        } else if (this.chooseLPSHIndex == 3) {
            return this.totalData.my_pledge_lp  || 0
        }
    },
    zyNum() {
        if (this.chooseLPZYIndex == 0) {
            return this.totalData.lp_num * .25 || 0
        } else if (this.chooseLPZYIndex == 1) {
            return this.totalData.lp_num * .5 || 0
        } else if (this.chooseLPZYIndex == 2) {
            return this.totalData.lp_num * .75 || 0
        } else if (this.chooseLPZYIndex == 3) {
            return this.totalData.lp_num  || 0
        }
         
    }
  },
  methods: {
    doTimer() {
        if (this.timer) {
            clearInterval(this.timer)
        }
        this.timer = setInterval( () => {
            this.getTransferLog()
        }, 15000)
    },
    async getTransferLog() {
        const res = await getTransferLogData({})
        if (res.data.list.length > 0) {
            if (res.data.list[0].status == 'pending') {
                this.showPDialog = true
            } else {
                this.$toast.loading({
                    duration: 0, // 持续展示 toast
                    forbidClick: true,
                    message: "请稍后..."
                })
                this.showPDialog = false
                setTimeout( () => {
                    this.$toast.clear()
                }, 500)
            }
        }
    },
    closeLo() {
        this.showPDialog = false
        if (this.timer) {
            clearInterval(this.timer)
        }
    },
    showAmake(data) {
        this.$refs.aMake.show(data)
    },
    // 获取原始NFT
    mescrollInit (mescroll) {
        this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    async upCallback() {
        await this.gettotalData()
        this.$nextTick(() => {
            this.mescroll.endSuccess()
        })
    },
    // 获取邀请信息
    async getInviteInfo() {
        const res = await toGetInvite({})
        this.inviteInfo = res.data
        if(this.inviteInfo.parent){
          this.bindParentBtn = true;
          this.insertInviteCode = this.inviteInfo.parent;
        }
    },
    async fetchData() {
        const res = await getTotalHashRateData({})
        this.interTotal = res.data
        if (this.active == 0) {
            this.gettotalData()
        } else {
            this.$refs.clist.getOriginNFTList()
        }
    },
    async bindVal() {
        if (!this.insertInviteCode) {
            return this.$toast({
                message: '邀请码不存在!'
            })
        }
        const res = await toBindInviteCode({invite_code: this.insertInviteCode})
        if (res.code == 1) {
            this.$toast({
                message: '绑定成功!'
            })
            this.getInviteInfo()
        } else {
            this.$toast({
                message: res.msg
            })
        }
    },
    async gettotalData() {
       const res = await getPoolData({})
       this.totalData = res.data
    },
    closeHL() {
        this.showDialogHL = false
    },
    closeSL() {
        this.showDialogSL = false
    },
    // 质押LP池
    ZYLP() {
        if (this.totalData.lp_num > 0) {
            this.showDialogLP = true
        } else {
            this.$toast({
                message: '您暂无LP'
            })
        }
    },
    copy() {
        this.$copyText(this.inviteInfo.invite_code).then(() => {
          this.$toast({message:"已成功复制到剪切板"})
        }).catch(() => {
          this.$toast({message:"复制失败"})
        })
    },
    intvite() {
        this.showDialogHL = true
    },
    async getSLData() {
        const res = await getMyNftHashRateData({})
        this.slData = res.data
        this.showDialogSL = true
    },
    // 赎回LP池
    SHLP() {
        // this.showDialogSH = true
        if (this.totalData.my_pledge_lp > 0) {
            this.showDialogSH = true
        } else {
            this.$toast({
                message: '您暂无质押中的LP'
            })
        }
    },
    // 获取NFT收益
    getSY() {
        if (this.totalData.nft_wait_received_earn > 0) {
            this.showDialog = true
        } else {
            this.$toast({
                message: '无收益可领取'
            })
        }
    },

    // 获取LP收益
    getSYLP() {
        if (this.totalData.lp_wait_received_earn > 0) {
            this.showDialogLPLQ = true
        } else {
            this.$toast({
                message: '无收益可领取'
            })
        }
    },
    closeShouYiLP () {
        this.showDialogLPLQ = false
    },
    closeShouYi() {
        this.showDialog = false
    },
    checkSHItem (i) {
        if (i != this.chooseLPSHIndex) {
            this.chooseLPSHIndex = i
        }
    },
    prevImg(img) {
        this.images = [img]
        this.showPrev = true
    },
    // 选择选中LP选项
    checkLPItem(i) {
        if (i != this.chooseLPZYIndex) {
            this.chooseLPZYIndex = i
        }
    },
    // 关闭LP
    closeZYLP() {
        this.chooseLPZYIndex = 0
        this.showDialogLP = false
    },
    // 关闭LPSH
    closeZYSH() {
        this.chooseLPSHIndex = 0
        this.showDialogSH = false
    },
    async onpledgeLp () {
        this.LPLoading = true
        const res = await ZYpledgeLp({ number: this.zyNum })
        this.LPLoading = false
        this.$toast({message: res.msg, duration: 5000})
        if (res.code == 1) {
            this.closeZYLP()
            this.fetchData()
        }
    },
    // 赎回
    async onRedeem () {
        this.SHLoading = true
        const res = await onRedemptionLp({ number: this.shNum })
        this.SHLoading = false
        
        this.$toast({message: res.msg, duration: 5000})
        if (res.code == 1) {
            this.closeZYLP()
            this.fetchData()
        }
    },
    // 领取收益
    async onReceiveIncome() {
        this.shouyiLPLoading = true
        const res = await onReceiveLpEarnData({})
        this.shouyiLPLoading = false
        this.$toast({message: res.msg, duration: 5000})
        if (res.code == 1) {
            this.fetchData()
            this.closeShouYiLP()
        }
    },
    // 质押单个
    pledgeOne() {
        if (this.totalData.my_hashrate <= 0) {
            return this.$toast({message: '无NFT可质押'})
        }
        this.$dialog.confirm({
            message: '确认质押一个NFT吗？',
        }).then(  () => {
            // on confirm
            this.web3.eth.personal.sign("Authorization", this.$store.getters.address).then( async () => {
                this.pleLoading = true
                const res = await pledgeNftOne({type: 1})
                this.pleLoading = false
                if (res.code == 1) {
                    this.fetchData()
                } else {
                    this.$toast({message: res.msg, duration: 5000})
                }
            }).catch( () => {
                this.$toast({message: '您未操作~', duration: 5000})
            })
            
        })
        .catch(() => {
            // on cancel
        });
        
    },
    // 领取收益
    async lingquSY() {
        this.shouyiLoading = true
        const res = await receiveNft({})
        this.shouyiLoading = false
        this.$toast({message: res.msg, duration: 5000})
        if (res.code == 1) {
            this.fetchData()
            this.closeShouYi()
        }
    },
    // 质押全部
    pledgeAll() {
        if (this.totalData.my_hashrate <= 0) {
            return this.$toast({message: '无NFT可质押'})
        }
        this.$dialog.confirm({
            message: '确认质押当前所有NFT吗？',
        }).then(  () => {
            this.web3.eth.personal.sign("Authorization", this.$store.getters.address).then( async () => {
                // on confir
                this.pleLoading1 = true
                const res = await pledgeNftOne({type: 2})
                this.pleLoading1 = false
                this.$toast({message: res.msg, duration: 5000})
                if (res.code == 1) {
                    this.fetchData()
                }
            }).catch( () => {
                this.$toast({message: '您未操作~', duration: 5000})
            })
            
            
        })
        .catch(() => {
            // on cancel
        });
    },
    changeTab(val) {
        if (val != this.active) {
            this.active = val
            if (this.active == 0) {
                this.$refs.swBody.swipeTo(0)	
            } else {
                this.$refs.swBody.swipeTo(1)
            }
            this.fetchData()
        }
    },
  },
  components:{
      Tabbar,
      countTo,
      CardList,
      authAmake,
      MescrollVue // 注册mescroll组件
  },
}
</script>
<style  scoped >
/* .mescroll {
    background-color: #19181F;
    position: fixed;
    top: 44px;
    bottom: 0;
    height: auto;
} */
.mescroll1 {
        max-height: calc(100vh - 165px);
}
.m-b-20 {margin-bottom: 20px;}
.m-b-10 {margin-bottom: 10px;}
.p-r-10 {padding-right: 10px;}
.m-r-10 {margin-right: 10px;}
.bg-312 {background-color: #312F3D;}
.m-t-20 {margin-top: 20px;}
.m-b-20 {margin-bottom:20px;}
.c-333 {font-size: #333;}
.fz-20 {font-size: 30px;}
.c-663 {color: #66625C;}
.c-d7c {color: #D7C19A;}
.fz-12 {font-size: 12px;}
.fz-14 {font-size: 14px;}
.fz-18 {font-size: 18px;}
.c-fff {color: #fff;}
.p-b-40 {padding-bottom: 40px;}
.width100 {width: 100%;}
.p-l-24 {padding-left: 24px;}
.p-r-24 {padding-right: 24px;}
.p-t-16 {padding-top: 16px;}
.m-b-36 {margin-bottom: 30px;}
.b-r-radius-20 {border-radius: 20px;}
.bg-242 {background-color: #24232D;}
body {background-color: #19181F;}
.m-b-30 {margin-bottom: 30px;}
.p-l-30 {padding-left: 30px;}
.p-r-30 {padding-right: 30px;}
.p-t-20 {padding-top: 20px;}
.p-b-20 {padding-bottom: 20px;}
.p-r-20 {padding-right: 20px;}
.p-l-20 {padding-left: 20px;}
.bold {font-weight: bold;}
.c-070 {color: #707070;}
.m-r-20 {margin-right: 20px;}
.m-b-5 {margin-bottom: 5px;}
.van-tabbar {background: #19181F;}
.van-tabbar-item {background: #19181F;}
[class*=van-hairline]::after {content: none !important;}
.m-b-5 {margin-bottom: 5px;}
.m-r-5 {margin-right: 5px;}
.fz-16 {font-size: 16px;}
.top-tra {transition: all ease .5s;}
.s-bg-imgs {background-image: url(../assets/imgs/12341.png);background-size: cover;background-repeat: no-repeat;background-position: center;}
</style>
